$slider-background-color: var(--rz-base-background-color) !default;
$slider-border: var(--rz-border-normal) !default;
$slider-border-radius: var(--rz-border-radius) !default;

$slider-horizontal-height: 0.5rem !default;
$slider-horizontal-width: 10rem !default;

$slider-range-background-color: var(--rz-secondary-lighter) !default;
$slider-range-border: var(--rz-border-secondary-light) !default;

$slider-handle-width: 0.75rem !default;
$slider-handle-height: 1.5rem !default;
$slider-handle-color: var(--rz-text-contrast-color) !default;
$slider-handle-background-color: var(--rz-secondary) !default;
$slider-handle-border: none !default;
$slider-handle-border-radius: calc(var(--rz-border-radius) / 2) !default;
$slider-handle-shadow: none !default;
$slider-handle-transition: background-color var(--rz-transition), color var(--rz-transition), border var(--rz-transition), box-shadow var(--rz-transition) !default;

$slider-handle-hover-border: $slider-handle-border !default;
$slider-handle-hover-background-color: var(--rz-secondary-light) !default;
$slider-handle-hover-shadow: inset 0 -3px 0 0 rgba(#fff, 0.2) !default;

$slider-disabled-background-color: var(--rz-base-background-color) !default;
$slider-disabled-border: var(--rz-border-disabled) !default;
$slider-disabled-range-background-color: var(--rz-base-100) !default;
$slider-disabled-range-border: var(--rz-border-normal) !default;
$slider-disabled-handle-background-color: var(--rz-base-300) !default;
$slider-disabled-handle-border: none !default;


// Slider CSS variables

:root {
  --rz-slider-background-color: #{$slider-background-color};
  --rz-slider-border: #{$slider-border};
  --rz-slider-border-radius: #{$slider-border-radius};
  
  --rz-slider-horizontal-height: #{$slider-horizontal-height};
  --rz-slider-horizontal-width: #{$slider-horizontal-width};
  
  --rz-slider-range-background-color: #{$slider-range-background-color};
  --rz-slider-range-border: #{$slider-range-border};

  --rz-slider-handle-width: #{$slider-handle-width};
  --rz-slider-handle-height: #{$slider-handle-height};
  --rz-slider-handle-color: #{$slider-handle-color};
  --rz-slider-handle-background-color: #{$slider-handle-background-color};
  --rz-slider-handle-border: #{$slider-handle-border};
  --rz-slider-handle-border-radius: #{$slider-handle-border-radius};
  --rz-slider-handle-shadow: #{$slider-handle-shadow};
  --rz-slider-handle-transition: #{$slider-handle-transition};

  --rz-slider-handle-hover-background-color: #{$slider-handle-hover-background-color};
  --rz-slider-handle-hover-border: #{$slider-handle-hover-border};
  --rz-slider-handle-hover-shadow: #{$slider-handle-hover-shadow};

  --rz-slider-disabled-background-color: #{$slider-disabled-background-color};
  --rz-slider-disabled-border: #{$slider-disabled-border};
  --rz-slider-disabled-range-background-color: #{$slider-disabled-range-background-color};
  --rz-slider-disabled-range-border: #{$slider-disabled-range-border};
  --rz-slider-disabled-handle-border: #{$slider-disabled-handle-border};
  --rz-slider-disabled-handle-background-color: #{$slider-disabled-handle-background-color};

}

.rz-slider {
  position: relative;
  display: inline-block;
  border: var(--rz-slider-border);
  border-radius: var(--rz-slider-border-radius);
  background-color: var(--rz-slider-background-color);

  &.rz-state-disabled {
    background-color: var(--rz-slider-disabled-background-color);
    border: var(--rz-slider-disabled-border);

    .rz-slider-range {
      background-color: var(--rz-slider-disabled-range-background-color);
      border: var(--rz-slider-disabled-range-border);
    }

    .rz-slider-handle {
      background-color: var(--rz-slider-disabled-handle-background-color);
      border: var(--rz-slider-disabled-handle-border);
    }
  }
}

.rz-slider-horizontal {
  height: var(--rz-slider-horizontal-height);
  width: var(--rz-slider-horizontal-width);
}

.rz-slider-range {
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;

  border-top-left-radius: var(--rz-slider-border-radius);
  border-bottom-left-radius: var(--rz-slider-border-radius);
  background-color: var(--rz-slider-range-background-color);
  border: var(--rz-slider-range-border);
}

.rz-slider-handle {
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  margin-left: calc(var(--rz-slider-handle-width) / -2);
  background-color: var(--rz-slider-handle-background-color);
  border: var(--rz-slider-handle-border);
  border-radius: var(--rz-slider-handle-border-radius);
  box-shadow: var(--rz-slider-handle-shadow);
  width: var(--rz-slider-handle-width);
  height: var(--rz-slider-handle-height);
  transition: var(--rz-slider-handle-transition);
}

.rz-slider:not(.rz-state-disabled) {
  .rz-slider-handle {
    &:hover,
    &:focus,
    &:active {
      background-color: var(--rz-slider-handle-hover-background-color);
      box-shadow: var(--rz-slider-handle-hover-shadow);
      border: var(--rz-slider-handle-hover-border);
      cursor: pointer;
    }
  }
}
